<template>
  <view class="content">
    <topHeight :backgroundColor="backgroundColor"></topHeight>
    <view class="header">
      <view  class="set" @click="toSet">
        <view class="iconfont icon-shezhi"></view>
        <text>设置</text>
      </view>
<!--      :style="'@include global-background-color('+this.$store.state.theme+')'"-->
<!--      {{this.$store.state.theme}}-->
      <view class="background-color" :style="'border-left: 3000rpx solid '+backgroundColor"></view>
      <view class="circle-animation-box">
        <view class="circle-animation" v-for="i in 4" v-bind:key="i"></view>
      </view>
      <view class="user">
        <view class="user-text">
          <view class="user-name">
            {{name}}
          </view>
          <view class="user-security">
            {{status}}
          </view>
        </view>
        <view class="user-logo">
          <img :src="headPicture">
        </view>
      </view>
    </view>
    <view class="navigation">
      <view class="navigation-item animation animateTremble" v-for="item in tabList"
            @click="click(item.click)" :key="item.id">
        <view class="iconfont " :class="item.iconName"></view>
        <text>{{item.name}}</text>
      </view>
    </view>
    <view v-for="item in founctionList" :class="item.class" hover-class="click-hover"
          @click="click(item.click)" :key="item.id">
      <view class="iconfont " :class="item.iconName"></view>
      <text>{{item.name}}</text>
    </view>
    <!--模态层-->
    <changeColor v-show="ChangeColor" @switchTheme="switchTheme"></changeColor>
    <view class="ChangeColor-model" @click="closeChangeColor" v-show="ChangeColor"></view>

    <!--模态层-->
<!--&lt;!&ndash;    传递PopUpDetail数据和closePopUp方法给子组件&ndash;&gt;-->
<!--    <Popup :PopUpDetail=PopUpDetail @closePopUp="closePopUp" :isShowPopUp=isShowPopUp></Popup>-->
<!--    <view class="Development-model" v-show="isShowPopUp"></view>-->
  </view>

</template>

<script>
import changeColor from "@/components/changeColor";
import Popup from "@/components/Popup";
import topHeight from "@/components/top-height";

export default {
  components: {
    changeColor,
    Popup,
    topHeight,
  },
  data() {
    return {
      ChangeColor:false,
      // isShowPopUp:false,
      name:'游客用户',
      status:'未认证用户',
      headPicture:'../../static/logo.png',
      // PopUpDetail:'正在开发中，头发掉光了！！！',
      color:'#47A86C',
      stateBarHeight:0,
      tabList:[
        {
          id:1,
          name:'我的主页',
          iconName:'icon-huangguan',
          click:'myHome',
        },
        {
          id:2,
          name:'与我相关',
          iconName:'icon-feiji',
          click:'relevant',
        },
        {
          id:3,
          name:'武院风云榜',
          iconName:'icon-huomiao',
          click:'fanList',
        },
      ],
      founctionList:[
        {
          id:1,
          name:'更换主题颜色',
          iconName:'icon-yanse',
          class:'change-color',
          click:'showChangeColor'
        },
        {
          id:2,
          name:'推荐给好友',
          iconName:'icon-fenxiang',
          class:'change-color margin-top',
          click:"toShare",
        },
        {
          id:3,
          name:'帮助中心',
          iconName:'icon-xiaoxi',
          class:'change-color',
          click:'toHelp'
        },
        {
          id:4,
          name:'关于我们',
          iconName:'icon-guanyu',
          class:'change-color',
          click:'toAbout'
        },
      ]
    }
  },

  mounted() {
    this.stateBarHeight = this.$store.state.stateBarHeight;
  },

  methods: {
    click: function(e) {
      this[e]();
    },
    showChangeColor(){
      this.ChangeColor=true;
    },
    closeChangeColor(){
      this.ChangeColor=false;
    },
    relevant(){
      uni.navigateTo({
        url:'components/Relevant'
      })
    },
    // showPopUp(){
    //   this.isShowPopUp=true;
    // },
    // closePopUp(data){
    //   this.isShowPopUp=data;
    // },
    toSet(){
      uni.navigateTo({
        url:'components/Set'
      })
    },
    toAbout(){
      uni.navigateTo({
        url:'components/About'
      })
    },
    myHome(){
      uni.navigateTo({
        url: 'components/MyHome'
      });
    },
    toShare(){

    },
    toHelp(){
      uni.navigateTo({
        url:'components/Help'
      })
    },
    switchTheme(theme1){
      // window.document.documentElement.setAttribute('theme',theme1)
      // console.log(this.$store.state);
      this.$store.state.nowColor=this.$store.state.Color[theme1-1].color;

      console.log(this.$store.state.nowColor)
      // console.log(theme1+'-----')
    },
    fanList(){
      uni.navigateTo({
        url:'components/FanList'
      });
    }
  },
  computed:{
    backgroundColor(){
      return this.$store.state.nowColor;
    }
  }
}
</script>

<style lang="scss" scoped>
//uni-page-body {
//  width: 100%;
//  height: 100%;
//}

.content {
  //min-height: 100vh;
  background: #F1F1F1;
  min-width: 100%;
  min-height: 100vh;
  .header {
    width: 100%;
    height: 400rpx;
    position: relative;
    .set{
      top: 80rpx;
      left: 3%;
      width: 130rpx;
      height: 50rpx;
      position: absolute;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:  25rpx;
      background-color: rgba(128,128,128,0.6);
      color: #FFFFFF;
      font-size: 30rpx ;
    }
    .background-color {
      position: absolute;
      //border-left: 3000rpx solid #48A86D;
      border-bottom: 400rpx solid transparent;
      //@include global-background-color()
    }

    .circle-animation-box {
      position: absolute;
      left: 150rpx;
      top: -35rpx;
      width: 600rpx;
      height: 450rpx;
      overflow: hidden;
      .circle-animation {
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        opacity: 1;
        background-color: #F1F3F4;
        border-radius: 50%;
        top: 67%;
        left: 76%;
        transform: translate(-50%, -50%);
        //animation: circulmove 9s infinite linear;
      }
      :nth-child(1) {animation: circulmove 8s 8s infinite linear;}
      :nth-child(2) {animation: circulmove 8s 6s infinite linear;}
      :nth-child(3) {animation: circulmove 8s 4s infinite linear;}
      :nth-child(4) {animation: circulmove 8s 2s infinite linear;}
      @-webkit-keyframes circulmove {
        0% {
          width: 200rpx;
          height: 200rpx;
          opacity: 0.3;
          box-shadow: 0 0 5rpx #888888;
        }

        100% {
          width: 800rpx;
          height: 800rpx;
          opacity: 0;
        }
      }
    }


    //&:nth-child(1) {}
    //&:nth-child(2) {}
    //&:nth-child(3) {}
    //&:first-child {}
    //&:last-child{}
    //.circle-animation1 {
    //  animation: circulmove 9s 9s infinite linear;
    //}
    //
    //.circle-animation2 {
    //  animation: circulmove 9s 6s infinite linear;
    //}
    //
    //.circle-animation3 {
    //  animation: circulmove 9s 3s infinite linear;
    //}

    //.circle-animation4 {
    //  animation: circulmove 8s 2s infinite linear;
    //}


  }

  .user {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 40rpx;
    margin-right: 40rpx;

    .user-text {
      z-index: 999;

      .user-name {
        color: #ffffff;
        font-size: 46rpx;
      }

      .user-security {
        color: rgba(250,250,250,0.8);
        font-size: 32rpx;
      }
    }

    .user-logo {
      margin-top: 140rpx;
      width: 200rpx;
      height: 200rpx;
      overflow: hidden;
      background-color: rgba(230,230,230,0.4);
      box-shadow:  0 0 7rpx #8E8E8E;
      border-radius: 50%;
      z-index: 999;
      position: relative;
      img{
        height: 180rpx;
        width: 180rpx;
        border-radius: 50%;
        margin: 10rpx;
      }
    }

  }

  .navigation {
    display: flex;
    justify-content: space-around;
    //z-index: 9999;
    .navigation-item {
      margin-top: 40rpx;
      align-items: center;
      text-align: center;
      flex-direction: column;

    }
    .animation {
      animation-duration: 1s;
    }
    @keyframes animateTremble {
      //from, 60%, 75%, 90%, to {
      //  animation-timing-function: cubic-bezier( 1.000,0.610, 0.355,0.215 );
      //}

      from {
        //opacity: 0;
        transform: scale(1.1) ;
        //transform: translate3d(300px, 0, 0) rotateY(-15deg) rotateX(-15deg) rotateZ(-15deg);
      }

      30% {
        opacity: 1;
        transform: scale(1.2) ;
      }

      65% {
        transform: scale(0.9);
      }

      95% {
        transform: scale(1.05);
      }

      to {
        transform: scale(1.0);
      }
    }
    .animateTremble {
      animation-name: animateTremble;
    }
  }
  .change-color{
    border-bottom: #E6E6E6 solid 1rpx;
    margin: 70rpx 40rpx 20rpx 40rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 30rpx;
  }
  .margin-top{
    margin-top: 100rpx;
  }
  .click-hover{
      //animation: _show 0.4s;
      //transform: scale(0.8)
    background-color: #E6E6E6;
    }
  .ChangeColor-model{
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
  .Development-model{
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
}

</style>
